<template>
  <!--我的关注-->
  <div class="body-layout">
    <header class="top-header">
      <!-- 返回按钮 -->
      <a @click="$router.back(-1);" class="header-left"></a>
      <article class="header-middle">我的关注</article>
    </header>
    <div class=" marginTop44" ref="conList">


      <article class="vf-concern">
        <div class="vf-concern_list border-bottom" v-for="item in authorList" @click="goLargeVipDetail(item.author_id)"
             v-stat='{action_type:2,button_type:28}'>
          <a href="javascript:;">
            <div class="concern-pic">
              <img :src="item.author_avatar">
            </div>
            <div class="concern-info">
              <h3 class="title">
                <img src="../assets/images/icon-v.png" alt="">{{item.author_name}}
              </h3>
              <p>{{item.desc}}</p>
              <span class="fans">粉丝：{{item.follower_count}}</span>
            </div>
          </a>
        </div>

        <article class="vf-bottom-tps">
          <div class="vf-bottom-tps_line" v-show="bottomText.length>0">
            <span>{{bottomText}}</span>
          </div>
        </article>
      </article>
    </div>
  </div>

</template>

<script>
  import util from '@/lib/util.js'
  import Bscroll from 'better-scroll'

  export default {
    name: 'MyConcern',
    data() {
      return {
        authorList: [],
        downFlag: true,
        sw: true,
        lastId: 0,
        height: 0,
        bottomText: "",//底部提示文字
        pageSize: 10//分页的页面大小
      }
    },
    created: function () {
      util.vars.in_time = new Date().getTime();

      // 登录判断
      this.$parent.login(8).then((res) => {

        this.getauthorList();
      });
    },
    methods: {
      getauthorList() {
        if (!this.downFlag) {
          return false;
        }
        let ori_last_id = this.lastId;
        util.ajax.get(`/user/follow/list?last_id=${this.lastId}&page_size=${this.pageSize}`).then((res) => {

          let list = res.data || [], curAuthorIDs = [];
          //排重操作，避免直接使用concat可能导致的重复请求bug  by tiansx 20180628
          this.authorList.forEach((author, i) => {
            curAuthorIDs.push(author.author_id);
          });

          list.forEach((item, index) => {
            if (curAuthorIDs.indexOf(item.author_id) === -1) {
              this.authorList.push(item);
            }
          });
          //this.authorList = this.authorList.concat(res.data);

          if (res.data.length < this.pageSize) {
            this.downFlag = false;
            //如果第一页就加载完毕，则不显示文字
            if (ori_last_id === 0) {
              this.bottomText = "";
            } else {
              this.bottomText = "您太勤奋了，没有更多了";
            }
          } else {
            this.downFlag = true;
            this.bottomText = "加载中";
          }
          // 数据加载完毕
          this.sw = true;
          
          // 取最后一条数据id
          if (res.data.length > 0) {
            let len = res.data.length - 1;
            this.lastId = res.data[len].id;
          }
        });
      },
      goLargeVipDetail(authorId) {
        this.$router.push({
          path: "/pages/LargeVipDetail",
          query: {
            aId: authorId
          }
        })
      },
      onScrollPull(e) {
        if (this.$el.querySelector('.vf-concern')) {

          let innerHeight = this.$el.querySelector('.vf-concern').clientHeight;

          let bottomHeight = this.$el.querySelector('.vf-bottom-tps').clientHeight;
//      let footerHeight = this.$el.querySelector('#footer').clientHeight;
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

          if (innerHeight <= scrollTop + document.documentElement.clientHeight) {
            if (this.sw == true) {
              // 将开关关闭
              this.sw = false;

              this.getauthorList();
            }
          }
        }
      },
    },
    mounted() {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.onScrollPull)
      })
    },
    deactivated() {
      // remove scroll 事件监听
//    window.removeEventListener('scroll', this.onScrollPull);
    }
  }
</script>

<style scoped>
  .vf-concern {
    /*padding-bottom: 0 !important;*/
  }

  .vf-bottom-tps {
    width: 80%;
    padding: 0px !important;
  }
</style>
